<template>
  <div class="header">
      <header-top class="header-top" ></header-top>
<!--    这里是图标的展示区-->
    <CenterContent v-show="isContentShow">
      <el-row :gutter="10" type="flex" justify="space-between" align="middle" class="header-content">
       <el-col :span="6" class="">
         <img src="../../assets/img/home/logo.png">
       </el-col>
        <el-col :span="10" class="">
          <el-input placeholder="请输入搜索的内容" >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6" class="">
          <el-button-group>
            <el-button icon="el-icon-s-shop">我的商城</el-button>
            <el-button icon="el-icon-shopping-cart-2">我的购物车</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </CenterContent>
<!--    这里是nav 分栏-->
    <div class=" header-nav " :style="!isContentShow?{position:'fixed',marginTop:'31px'}:''">
      <CenterContent>
        <el-row :gutter="10" type="flex" justifg="start" align="middle" class="row">
          <el-col :span="6" class="col all-goods nav-link">
          <header-bar>
            <el-link :underline="false">全部商品</el-link>
          </header-bar>
          </el-col>
         <el-col :span="2" class="nav-link point"><el-link :underline="false" @click="$router.push({name:'home'})">首页</el-link></el-col>
         <el-col :span="2" class="nav-link point"><el-link :underline="false">秒杀</el-link></el-col>
         <el-col :span="2" class="nav-link point"><el-link :underline="false">拼团</el-link></el-col>
         <el-col :span="2" class="nav-link point"><el-link :underline="false">积分商城</el-link></el-col>
        </el-row>
<!--        bar-->
      </CenterContent>
    </div>
  </div>
</template>

<script>
import HeaderTop from './Header-Top'
import HeaderBar from './Header-Bar'
export default {
  name: 'Header',
  components: {
    HeaderTop,
    HeaderBar
  },
  data () {
    return {

    }
  },
  props: {
    isContentShow: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="scss">
  .header {
    min-height: 210px;
    width: 100%;
    z-index: 1000;
    .header-top {
      position: fixed;
      width: 100%;
      z-index: 100;
      background: #f9f9f9;
      box-shadow: 0px 1px 4px rgba(144, 147, 153, 0)
    }
    .header-content {
      margin: 35px;
    }
    .header-nav {
      background: #231c29;
      width: 100%;
      min-height: 40px;
      z-index: 100;
      color: #f9f9f9;
      .col {
        height: 40px;
      }
      .row {
        min-height: 40px;
        /deep/ div {
          height: 40px;
          line-height: 40px;
        }
      }
      .nav-link /deep/ span {
      /*  链接*/
        font-size: 17px;
        color: #f9f9f9;
      }
      .all-goods {
      /*  全部商品*/
        line-height: 40px;
        background:#409EFF ;
      }
      .point {
      /*  鼠标指向*/
        &:hover {
          background: #111111;
        }
      }
    }
  }
</style>
